<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style type="text/css">
	html,body,#reg{margin:0;width: 100%;height: 100%;}
	input::input-placeholder{color:  #C7C7CC ;}
	::-webkit-input-placeholder { 
		color:#C7C7CC; 
		}
	.logo{
		z-index: 10;
	    position: absolute;
	    opacity: 1;
	    width: 4.5rem;
	    height: 4.5rem;
	    border-radius: 4px;
	    background: #fff;
	    top: 1.4rem;
	    left: 2rem;
	}
	.logo>img{width: 80%;margin:0.4rem 0.4rem;}
	h1{position: absolute;z-index: 10; text-align: center; margin-top:2.5rem; width: 100%;font-weight: 500; font-size:1.5rem;color: #fff;}
	#reg>img{position: absolute;top:0;left:0;z-index: -1;}
	#reg>.form{padding-top: 26%;}
	.require{width: 80%;margin:0 auto;border-bottom: 1px solid #525151;padding:1rem 1rem;}
	.require label{display: inline-block;width: 30%;color:#fff;font-size:1.3rem;}
	.require input{background: transparent;width: 60%; border:0;font-size: 1.3rem;height: 2rem; color:#fff;font-size:1.3rem;outline:none;}
	.require button{width: 100%;height: 3rem;background:#169bd4;color:#fff;border:0; border-radius: 8px;font-size:1rem;}
	.box{text-align: center;margin:0.7rem;}
	input[type="checkbox"]{-webkit-appearance:none;margin-right:0.5rem; width:1.5rem; height:1.5rem; background-color:#fff; border:1px solid; position:relative; outline:none;vertical-align: -7px;}
	input[type="checkbox"]:checked:before {
    content: "\2714";
    font-size: 1rem;
    color: red;
    position: absolute;
    left: 4px;
    top: 0px;
	}
	#account{padding-left: 0;line-height: 1.5;}
    .mui-input-row .mui-input-clear~.mui-icon-clear,.mui-input-row .mui-input-password~.mui-icon-eye{
    	color:#fff;
    	font-size: 2rem;
		top:1.2rem;
		right:1rem;
    }
	.mui-input-row label~input{
		margin-top:0.3rem;
	}
	</style>
	</head>

	<body>
		<div id="reg">
	         <img src="img/u10.png" width="100%" height="100%" alt="">
	    	 <div class="title">
	    	 	<div class="logo">
	    	 		<img src="img/u12.png" id="logo" alt="">
	    	 	</div>
	    	 	<h1>高青电力物联感知平台</h1>
	    	 </div>
	    	 <div class="form" id="form">
	    	 	 <form action="">
	    	 	 	 <div class="require mui-input-row">
	    	 	 	 	<label>用户名</label>
	    	 	 	 	<input type="text" id='account' name="name" class="required mui-input-clear" placeholder="请输入用户名">
	    	 	 	 </div>
	    	 	 	 <div class="require mui-input-row">
	    	 	 	 	<label>设置密码</label>
	    	 	 	 	<input type="passward" id='password' name="password" class="required mui-input-password" placeholder="请输入密码">
	    	 	 	 </div>
	    	 	 	 <div class="require mui-input-row">
	    	 	 	 	<label>确认密码</label>
	    	 	 	 	<input type="passward" id='password_confirm' name="password" class="required mui-input-password" placeholder="请输入确认密码">
	    	 	 	 </div>
	    	 	 	 <div class="require mui-input-row">
	    	 	 	 	<label>设置手机号</label>
	    	 	 	 	<input type="passward" name="phone" id="phone" class="required mui-input-clear" placeholder="请输入手机号">
	    	 	 	 </div>
	    	 	 	 <div class="require mui-input-row">
	    	 	 	 	<label>设置邮箱</label>
	    	 	 	 	<input type="passward" id='email' name="password" class="required mui-input-clear" placeholder="请输入邮箱">
	    	 	 	 </div>
	    	 	 	 <div class="box">
	    	 	 	 	<input type="checkbox" id="checkbox">我已阅读并接受<a href="">《版权申明》</a>和<a href="">《隐私保护》</a>
	    	 	 	 </div>
	    	 	 	 <div class="require" style="padding-bottom: 1.5rem;border-bottom: 0;">
	    	 	 	 	<button type="button" id="log">注册</button>
	    	 	 	 </div>
	    	 	 </form>
	    	 </div>
	    	 
	    </div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/public.js"></script>
		<script>
			(function($, doc) {
				$.init();
//				$.plusReady(function() {
	                var logo = document.getElementById("logo");
					logo.addEventListener('tap',function(){
						mui.openWindow({
							url:"login.html",
							id:"login",
							style:{},
							show:{
								autoShow:true,
								aniShow:"slide-in-right",
								duration:100
							},
							waiting:{
								autoShow:true,
								title:"正在加载·····"
							}
						})
                        
					});
					var settings = app.getSettings();
					var regButton = doc.getElementById('log');
					var accountBox = doc.getElementById('account');
					var passwordBox = doc.getElementById('password');
					var passwordConfirmBox = doc.getElementById('password_confirm');
					var emailBox = doc.getElementById('email');
					var phones = doc.getElementById('phone');
					var checkbox = document.getElementById("checkbox");
					
					regButton.addEventListener('tap', function(event) {
						var regInfo = {
							account: accountBox.value,
							password: passwordBox.value,
							email: emailBox.value,
							phone: phones.value
						};
						var passwordConfirm = passwordConfirmBox.value;
						if (passwordConfirm != regInfo.password) {
							plus.nativeUI.toast('密码两次输入不一致');
//							mui.toast('密码两次输入不一致');
							return;
						}
						app.reg(regInfo, function(err) {
							if (err) {
								plus.nativeUI.toast(err);
//								mui.toast(err);
								return;
							}
//							console.log(regInfo);
							
							if(checkbox.checked){
									mui.ajax({
						            type: "POST",
								    url: __PATH__+"index/register",
								    async: true,
								    data:{
								    	 username:regInfo.account,
						                 password:regInfo.password,
						                 email:regInfo.email,
						                 phone:regInfo.phone 
								    },
								    dataType: "json",
								    json: "jsoncallback",
								    timeout: 1000,
								    success: function(data) {
								    	console.log(data)
								    	if(data.code==400){
//								    		alert("用户名已存在！")
											plus.nativeUI.toast('用户名已存在！');
								    	}else{
//								    		alert('注册成功!!!');
                                            plus.nativeUI.toast('注册成功');
								    		$.openWindow({
								    			url:"login.html",
								    			id:"login",
								    			show: {
									            aniShow: 'pop-in'
                                                }
								    		});
          	  							
								    	}
								    	console.log(data);  
//								    	
								    },
								    error:function(xhr,type,errorThrown){
										mui.alert(xhr,'提示') 				
									}
								}); 
								
							}else{
								plus.nativeUI.toast("你还没有接受《版权申明》和《隐私保护》");
//								mui.toast("你还没有接受《版权申明》和《隐私保护》");
							}
					    	
							/*
							 * 注意：
							 * 1、因本示例应用启动页就是登录页面，因此注册成功后，直接显示登录页即可；
							 * 2、如果真实案例中，启动页不是登录页，则需修改，使用mui.openWindow打开真实的登录页面
							 */
//							plus.webview.getLaunchWebview().show("pop-in",200,function () {
//								plus.webview.currentWebview().close("none");
//							});
							//若启动页不是登录页，则需通过如下方式打开登录页
//							$.openWindow({
//								url: 'login.html',
//								id: 'login',
//								show: {
//									aniShow: 'pop-in'
//								}
//							});
						});
					});
//				});
			}(mui, document));
		</script>
	</body>

</html>